<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>有奖答题平台</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="/mobile/css/bui.css" />
    <link rel="stylesheet" href="/lib/mobile/css/common.css?1211"/>
    <link rel="stylesheet" href="/lib/mobile/css/rank.css?0020"/>
</head>
<body>
    <ul class="rank_tabs">
       <li class="on" id="rank_person"><a href="javascript:void(0)">个人排行榜</a></li>
       <li id="rank_company"><a href="javascript:void(0)">单位排行榜</a></li>
    </ul>
    <div class="rank_user">
        <dl><dt id="rank_user"></dl>
        <ul>
            <li><strong id="point"></strong><span>积分</span></li>
            <li><span>排名</span><strong id="rank"></strong></li>
        </ul>
    </div>
    <div class="rank_list">
        <dl>
            <!--<dd class="on"><span>2021年2月</span><i></i></dd>-->
            <!--<dd><span>2021年度</span><i></i></dd>-->
            <dd class="on" id="monthon"><span><input type="text" id="month" style="width: 80px" readonly class="bui-input"></span><i></i></dd>
            <!--<dd id="yearon"><span><input type="text" id="year" style="width: 50px" readonly class="bui-input"></span><i></i></dd>-->
        </dl>
        <div class="rank_rlist rank_rlist5">
            <ol>
                <li>序号</li>
                <li>头像</li>
                <li>姓名</li>
                <li>积分</li>
                <li>用时</li>
            </ol>
            <ul class="bui-list">
                <div id="ywclist" class="bui-scroll">
                    <div class="bui-scroll-head"></div>
                    <div class="bui-scroll-main">
                        <div class="bui-list bui-list-thumbnail" id="ddlb">

                        </div>
                    </div>
                    <div class="bui-scroll-foot"></div>
                </div>
            </ul>
        </div>
    </div>
    <ul class="bottom_menu">
        <li  id="indexsy"><a href="javascript:void(0);">首页</a></li>
        <!--<li>|</li>-->
        <li  id="hdrule"><a href="javascript:void(0);">活动规则</a></li>
        <!--<li  id="point_rule"><a href="javascript:void(0);">积分规则</a></li>-->
        <!--<li>|</li>-->
        <!--<li id="prize_rule"><a href="javascript:void(0);">抽奖规则</a></li>-->
        <!--<li>|</li>-->
        <li id="center"><a href="javascript:void(0);">个人中心</a></li>
    </ul>
    <!-- 依赖库 手机调试的js引用顺序如下 -->
    <script src="/lib/mobile/js/zepto.js"></script>
    <script src="/lib/mobile/js/plugins/fastclick.js"></script>
    <script src="/lib/mobile/js/bui.js"></script>
    <script src="/lib/mobile/js/common.js?1111    "></script>
    <script>
        var storage = bui.storage();
        var uid=storage.get("uid");
        bui.ready(function () {
            // 这里写业务及控件初始化

            dateSelect();
            root();
            changeDateStyle();

            bui.btn({id: ".bui-page", handle: ".bui-btn"}).load();
            myPersonPoint($("#month").val(),"month");
            var pageview = {};
            pageview.init = function () {
                // 验证码示例
                $("#indexsy").on("click", function (argument) {
                    bui.load({ url: BASE_URL+"mobile/index"});
                });
                $("#point_rule").on("click", function (argument) {
                    bui.load({ url: BASE_URL+"mobile/point_rule"});
                });
                $("#prize_rule").on("click", function (argument) {
                    bui.load({ url: BASE_URL+"mobile/prize_rule"});
                });
                $("#center").on("click", function (argument) {
                    bui.load({ url: BASE_URL+"mobile/center"});
                });

                //我的积分
                getMyponit(uid[0]);
            }
            pageview.init();
        })
        var j=0;
        function myPersonPoint(ny,flag){
            bui.list({
                id: "#ywclist",
                url: BASE_URL+"mobile/myPersonPoint",
                pageSize: 10,
                data: {
                    ny:ny,
                    flag:flag
                },
                field: {
                    page: "page",
                    size: "pageSize",
                    data: "data"
                },
                callback: function(e) {
                    // e.target 为你当前点击的元素
                    // e.currentTarget 为你当前点击的handle 整行
                },
                template: function(data) {
                    var html="";
                    // $("#ddlb").html("");
                    data.forEach(function(el, index) {
                        var classname='';
                        if(j==0){
                            classname="<s class='first icon'></s>";
                        }else if(j==1){
                            classname="<s class='two icon'></s>";
                        }else if(j==2){
                            classname="<s class='three icon'></s>";
                        }else if(j>2){
                            classname="<s>lv."+(j+1)+"</s>";
                        }
                        var usrname=el.usrname;
                        html+=` <ul><li>${classname} </li>
                            <li><img src="/lib/mobile/img/uhead.png?11" style="width: 18px;height: 18px" alt="" /></li>
                            <li>${usrname}</li>
                            <li>${el.point}积分</li>
                            <li>${el.usetime}秒</li></ul>`;
                        j++;
                    });
                    // for(var i=0;i<data.length;i++){
                    //
                    //     html+="<ul><li>"+classname+"</li>\n" +
                    //         "            <li><img src=\"/lib/mobile/img/uhead.png?11\" style='width: 18px;height: 18px' alt=\"\" /></li>\n" +
                    //         "            <li>"+usrname+"</li>\n" +
                    //         "            <li>"+data[i].point+"积分</li>\n" +
                    //         "            <li>"+data[i].usetime+"秒</li></ul>";
                    //     // html +="<li>"+classname+"<p><img src=\"/lib/mobile/img/uhead.png?11\" alt=\"\" /><span>"+usrname+"</span></p><u> "+data[i].point+"积分("+data[i].usetime+"秒)</u></li>";
                    // }
                    return html;
                },
                onBeforeRefresh: function() {
                    // console.log("brefore refresh")
                    j=0;
                },
                onBeforeLoad: function() {
                    // console.log("brefore load")
                },
                onRefresh: function() {
                    // 刷新以后执行
                    // j=0;
                    // console.log("refreshed")
                },
                onLoad: function() {
                    // 刷新以后执行
                    // console.log("loaded")
                }
            })
        }
        function getMyponit(uid) {
            //执行登录操作
            var loginAjax = bui.ajax({
                url: BASE_URL+"mobile/myPersonPoint",
                // 可选参数
                data: {
                    page:0,
                    pageSize:10,
                    uid:uid,
                    ny:$("#month").val(),
                    flag:"month"
                },
                method: "POST"
            });
            loginAjax.then(function(res) {
                // console.log(res)
                if(res.code == 0){
                    var user = res.data;
                    if(user.length>0){
                        $("#point").html(user[0].point);
                        $("#rank").html(user[0].rankpx);
                        $("#rank_user").html("<img src=\""+user[0].avatar+"\" alt=\"\" /></dt><dd>"+user[0].usrname+"</dd>");
                    }else{
                        $("#point").html("");
                        $("#rank").html("");
                    }
                }else{
                    bui.alert(res.msg);
                }
            },function(res) {
                bui.alert("请求异常");
            })
        }
        function dateSelect() {
            var uiPickerdate = bui.pickerdate({
                handle: "#month",
                bindValue: true, // 1.5.3 新增, 修改的值会自动绑定到 handle, 不再需要自己去绑定
                // input 显示的日期格式
                formatValue: "yyyyMM",
                onChange: function(value) {
                },
                callback: function(e) {
                    $("#monthon").addClass("on");
                    // $("#yearon").removeClass("on");
                    myPersonPoint(this.value(),'month');
                },
                // 如果不需要按钮,设置为空
                // buttons: [{name:"取消"}]
            });
            uiPickerdate.cols({
                date: "none",
                hour: "none",
                minute: "none",
                second: "none"
            })
            var year = bui.pickerdate({
                handle: "#year",
                bindValue: true, // 1.5.3 新增, 修改的值会自动绑定到 handle, 不再需要自己去绑定
                // input 显示的日期格式
                formatValue: "yyyy",
                onChange: function(value) {
                },
                callback: function(e) {
                    $("#monthon").removeClass("on");
                    // $("#yearon").addClass("on");
                    // myPersonPoint('',this.value(),'year');
                },
                // 如果不需要按钮,设置为空
                // buttons: [{name:"取消"}]
            });
            year.cols({
                month: "none",
                date: "none",
                hour: "none",
                minute: "none",
                second: "none"
            })
        }
        function changeDateStyle() {
            $(".rank_list dd.on span").click(function () {
                $(this).removeClass('on');
            });
            $(".rank_list dd span").click(function () {
                $(this).addClass('on');
            });
        }
        function root() {
            $("#rank_person").on("click", function (argument) {
                $("#rank_person").addClass("on");
                $("#rank_company").removeClass("on");
                bui.load({ url: BASE_URL+"mobile/rank_person"});
            });
            $("#rank_company").on("click", function (argument) {
                $("#rank_company").addClass("on");
                $("#rank_person").removeClass("on");
                bui.load({ url: BASE_URL+"mobile/rank_company"});
            });
        }
        </script>
</body>
</html>
